<template>
	<div class="asset-print">
		<div class="qrtitle">{{ title }}</div>
		<!-- <div class="qrcode" id="qrCode"></div> -->
		<canvas
			id="QRCode_header"
			class="QRCode_header"
			ref="canvas"
			title="扫描二维码"
			></canvas>
		<div class="content"><img class="qrcode" :src="QRCodeUrl" id="qrCode" /></div>
		<div class="qrInfo">
			<template v-if="printType == 'asset'">
				<div>项目名称：{{ asset.proName }}</div>
				<div>项目负责人：{{ asset.proLeaderName }}</div>
				<div>序列号：{{ asset.assetSerialNum }}</div>
				<div>资产类型：{{ asset.assetTypeName }}</div>
				<div>收货日期：{{ dateFormat(asset.createTime, 'yyyy.MM.dd') }}</div>
			</template>
			<template v-if="printType == 'running'">
				<div>业务名称：{{ asset.proName }}</div>
				<div>负责人：{{ userName }}</div>
				<!-- <div>负责人：{{ asset.proLeaderName }}</div> -->
				<div>主机名：{{ asset.hostName }}</div>
				<div>主机中文名：{{ asset.hostNameCn }}</div>
				<div>上架日期：{{ dateFormat(asset.createTime, 'yyyy.MM.dd') }}</div>
			</template>
		</div>
	</div>
</template>

<script>
	import { dateFormat } from '@/utils/public';
	// import QRCode from 'qrcodejs2'
	import QRCode from 'qrcode';
	
	export default {
		props: {
			asset: {
				type: Object,
				default: () => {
					return {};
				},
			},
			printType: {
				// asset:资产属性标签，running：运行属性标签
				type: String,
				default: '',
			},
			userName: {
				type: String,
				default: '',
			},

			canvasWidth:{
			default:200,
			type:Number
			},
			canvasHeight:{
			default:200,
			type:Number
			},
			logoUrl:{
			default:'../skin/logo_icon.png',
			type:String,
			// required:true
			}
		},
		data() {
			return {
				title: '',
				QRCodeUrl: '',
				canvas:''
			};
		},
		watch: {
			asset: {
				immediate: true,
				deep: true,
				handler: function(newValue, oldValue) {
					if (newValue) {
						// text = `NJYB@SXDL:${newValue.id}`
						this.initQR(`NJYB@SXDL:${newValue.assetId}`);
					}
				},
			},
		},
		mounted() {
			// canvas = this.$refs.canvas;
			// var canvas = document.getElementById('qrCode')
			// QRCode.toCanvas(
			// 	canvas,
			// 	text,
			// 	{
			// 		width: '56px',
			// 		height: '56px',
			// 	},
			// 	function(error) {
			// 		if (error) console.error(error)
			// 		console.log('QRCode success!')
			// 	}
			// )
			// new QRCode(this.$refs.qrCode, {
			// 	text,
			// 	width: 56,
			// 	height: 56,
			// 	// colorDark: "green", // 二维码颜色
			// 	colorLight: '#ffffff', // 二维码背景色
			// 	correctLevel: QRCode.CorrectLevel.H, // 容错率,L:容错率为 7%;M:容错率为 15%;Q:容错率为 25%;H:容错率为 30%. PS:容错级别越高抗残破或遮挡的能力就越强
			// })
		},
		methods: {
			dateFormat,
			initQR(text) {
				if (this.printType == 'asset') {
					this.title = '资产属性标签';
					// text = `NJYB@SXDL:${this.asset.id}`
					// {
					// 	项目名称: this.asset.proName,
					// 	项目负责人: this.asset.proLeaderName,
					// 	序列号: this.asset.assetSerialNum,
					// 	资产类型: this.asset.assetTypeName,
					// 	收货日期: this.dateFormat(this.asset.createTime, 'yyyy.MM.dd'),
					// }
					// `项目名称：${this.asset.proName};项目负责人：${this.asset.proLeaderName};序列号：${this.asset.assetSerialNum};资产类型：${this.asset.assetTypeName};收货日期：${this.dateFormat(
					// 	this.asset.createTime,
					// 	'yyyy.MM.dd'
					// )}`
				}
				if (this.printType == 'running') {
					this.title = '运行属性标签';
					// text = `NJYB@SXDL:${this.asset.id}`
					// `业务名称：${this.asset.proName};负责人：${this.asset.proLeaderName};主机名：${this.asset.hostName};主机中文名：${this.asset.hostNameCn};上架日期：${this.dateFormat(
					// 	this.asset.createTime,
					// 	'yyyy.MM.dd'
					// )}`
				}
				let opts = {
					errorCorrectionLevel: "H",//容错级别,指二维码被遮挡可以扫出结果的区域比例
					type: "image/png",//生成的二维码类型
					quality: 0.3,//二维码质量
					margin: 5,//二维码留白边距
					width: this.canvasWidth,//宽
					height: this.canvasHeight,//高
					text: this.text,//二维码内容
					color: {
						light: "#eaeaea"//背景色
					}
				};
				// var canvas = document.getElementById('QRCode_header')
				var canvas = document.getElementsByClassName('QRCode_header');
				console.log(canvas)
				// toCanvas()方法是用来生成二维码并渲染到一个canvas元素上的,将获取到的数据（val）画到msg（canvas）上
				QRCode.toCanvas(canvas, this.url, opts, function (error) {
					if(error){
					console.log('加载失败！');
					}
				});
				//设置logo图标
				if(this.logoUrl!= ''){
					// let myCanvas = canvas
					let ctx = canvas.getContext('2d')
					// 在Canvas画布 添加图片
					let img = new Image()
					img.crossOrigin = 'Anonymous';//解决Canvas.toDataURL 图片跨域问题
					img.src = this.logoUrl;
					img.onload = ()=>{
						//第一个设置的元素，第二三是位置，后面两个是宽和高
						//居中的位置计算为 （二维码宽度-img宽度）/2
						let codeWidth = (this.canvasWidth *0.75)/2
						let codeHeight = (this.canvasHeight * 0.75)/2
						ctx.drawImage(img, codeWidth, codeHeight,this.canvasWidth*0.25,this.canvasHeight*0.25)
					}
				}

				//toDataURL()方法用于将生成的二维码转换成数据URL
				// QRCode.toDataURL(text)
				// 	.then(url => {
				// 		console.log(url);
				// 		this.QRCodeUrl = url;
				// 	})
				// 	.catch(err => {
				// 		console.error(err);
				// 	});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.asset-print {
		// margin-top: 13px;
		// margin-bottom: 92px;
		width: 198px;
		height: 266px;
		// border: 0.5px #000000 solid;
		// margin-bottom: 20px;
		// display: flex;
		// flex-direction: column;

		.qrtitle {
			// margin-top: 7px;
			font-size: 10px;
			display: flex;
			// border: 0.5px #eb1c1c solid;
			// margin-left: -5px;
			justify-content: center;
			align-items: center;
			padding-top: 10px;
		}

		.content {
			display: flex;
			// height: 50px;
			// width: 180px;
			justify-content: center;
			align-items: center;
			padding-right: 12px;
			// border: 0.5px #ced124 solid;
		}
		.qrcode {
			//二维码大小
			width: 130px;
			height: 130px;
			padding-left: 0px;
			// padding-right: 10px;
			// margin-top: 3px;
			// margin-left: -5px;
			// margin-bottom: 1px;
			// display: flex;
			
			// justify-content: flex-end;
			align-items: center;
			// border: 0.5px #4332da solid;
			
		}
		.qrInfo {
			width: 100%;
			height: 110px;
			display: grid;
			/* 设置三列列宽 宽度都为100px */
			// grid-template-columns: auto;
			// /* 设置三行行高 高度都为100px */
			// grid-template-rows: 10px 10px 10px 10px 10px 10px;
			// column-gap: 1px;
			grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  			grid-gap: 1px;

			font-size: 10px;
			text-align: left;
			padding-left: 10px;
			margin: 0;
			padding-bottom: 10px;
			// text-indent: 2em;
			// text-decoration: underline;
			// letter-spacing: 0.5px;
			// margin-left: 9px;
			// font-size: 9px;
			// border: 0.5px #24c79e solid;
		}
	}
</style>
